<template>
	<view>
		<NavBar title="酒店订单" />
		<view class="order-type zdy-flex zdy-flex-around">
			<view :class="{ activedClass: item.value == params.type }" @click="cutStatus(item.value)" v-for="item in payTypeList" :key="item.value">{{ item.label }}</view>
		</view>
		<view class="order-box">
			<view class="order-item" v-for="(its, index) in orderList" :key="index">
				<view class="order-item-top zdy-flex zdy-flex-align-center">
					<image src="/static/img/my/gd.png" style="width: 30rpx; height: 35rpx" mode=""></image>
					<view class="order-name">长沙岳麓区大学城店</view>
					<u-icon size="12" name="arrow-right" bold></u-icon>
					<view class="order-status" :style="{ color: its.status == 1 ? '#149E99' : '#FF3A3A' }">{{ filtersStatus(its.status) }}</view>
				</view>
				<view class="order-info zdy-flex">
					<u--image radius="12rpx" :showLoading="true" src="/static/img/home/shenghuo.png" width="145rpx" height="145rpx"></u--image>
					<view class="order-info-right">
						<view class="zdy-flex zdy-flex-between room-type">
							<view class="">两室一厅房型</view>
							<view class="">￥799.00</view>
						</view>
						<view class="zdy-flex zdy-flex-between order-timeout">
							<view class="">当前已过免费取消时段</view>
							<view class="order-count">x 1</view>
						</view>
						<view class="order-person">可供4人入住</view>
						<view class="order-date">5月1日-5月3日 共 2 晚</view>
						<view class="price-box">
							<span class="total-price">总价：￥799.00</span>
							<span class="actually-paid">实付款：￥689.00</span>
						</view>
						<view class="order-bottom zdy-flex zdy-flex-end">
							<template v-if="its.status == 1">
								<view class="contact-service">取消支付</view>
								<view class="get-password">去支付</view>
							</template>
							<template v-if="its.status == 2">
								<view class="contact-service">联系客服</view>
								<view class="get-password">获取密码</view>
							</template>
							<template v-if="its.status == 3">
								<view class="contact-service">删除订单</view>
							</template>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			payTypeList: [
				{ label: '全部', value: 0 },
				{ label: '待支付', value: 1 },
				{ label: '待入住', value: 2 },
				{ label: '已完成', value: 3 }
			],
			orderList: [{ status: 1 }, { status: 2 }, { status: 3 }],
			params: { type: 0 }
		};
	},
	methods: {
		cutStatus(value) {
			this.params.type = value;
		},
		filtersStatus(status) {
			return this.payTypeList.filter((item) => {
				return item.value == status;
			})[0].label;
		}
	}
};
</script>

<style>
page {
	background-color: #e6f8f7;
}
</style>

<style scoped lang="scss">
.order-type {
	padding: 15rpx 0;
	background-color: #ffffff;
	margin-bottom: 20rpx;
	font-weight: 500;
	color: #666666;
	width: 100%;
	view {
		padding-bottom: 20rpx;
		position: relative;
		flex: 1;
		text-align: center;
	}
}
.activedClass {
	color: #333333;
	font-weight: bold;
	&::after {
		position: absolute;
		background-color: #85dcd6;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		content: ' ';
		display: block;
		width: 25%;
		height: 8rpx;
		border-radius: 4rpx;
	}
}
.order-box {
	padding-bottom: 50rpx;
	.order-item {
		margin-bottom: 20rpx;
		background-color: #ffffff;
		padding: 30rpx;
		.order-item-top {
			padding-bottom: 30rpx;
			font-weight: bold;
			font-size: 32rpx;
			border-bottom: 1rpx solid #eeeeee;
			.order-name {
				margin: 0 20rpx;
				color: #333333;
			}
			.order-status {
				margin-left: auto;
				color: #149e99;
			}
		}
		.order-info {
			margin-top: 30rpx;
			.order-info-right {
				flex: 1;
				margin-left: 25rpx;
				font-weight: 500;
				.room-type {
					margin-bottom: 15rpx;
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
				}
				.order-timeout {
					font-size: 22rpx;
					color: #ff3a3a;
				}
				.order-count {
					margin-left: auto;
					font-size: 24rpx;
					color: #999999;
				}
				.order-person {
					margin: 10rpx 0;
					font-size: 22rpx;
					color: #666666;
				}
				.order-date {
					width: fit-content;
					background: #dcf6f4;
					border-radius: 4rpx;
					padding: 8rpx 15rpx;
					font-size: 20rpx;
					color: #149e99;
				}
				.price-box {
					text-align: right;
					margin: 25rpx 0 40rpx;
				}
				.total-price {
					color: #999999;
				}
				.actually-paid {
					margin-left: 40rpx;
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
				}
				.order-bottom {
					view {
						border-radius: 999rpx;
						padding: 12rpx 28rpx;
						font-weight: bold;
						font-size: 26rpx;
					}
					.contact-service {
						color: #04b9b2;
						background: #ffffff;
						border: 2px solid #04b9b2;
					}
					.get-password {
						margin-left: 25rpx;
						border: 2px solid transparent;
						color: #ffffff;
						background-color: #04b9b2;
					}
				}
			}
		}
	}
}
</style>
